<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <template #header>
            <div>
                <span>修改邮箱</span>
            </div>
        </template>
        <template #default>
            <div class="container">
                <div class="step">
                    <el-steps
                        :active="schedule"
                        align-center
                        process-status="finish"
                        finish-status="success"
                        space="33%"
                    >
                        <el-step :key="1" title="获取当前邮箱认证"></el-step>
                        <el-step :key="2" title="确认新邮箱"></el-step>
                        <el-step :key="3" title="完成"></el-step>
                    </el-steps>
                </div>
                <div class="content">
                    <div style="width: 800px">
                        <el-form
                            :model="oldEmailData"
                            :rules="rules"
                            label-width="auto"
                            ref="oldEmailForm"
                            v-if="schedule === 1"
                        >
                            <el-form-item label="当前邮箱" prop="email">
                                <el-input v-model="oldEmailData.email" type="text" :disabled="true" />
                            </el-form-item>
                            <el-form-item prop="code" label="验证码">
                                <div class="code_item">
                                    <el-input v-model="oldEmailData.code" type="text"></el-input>
                                    <code-button
                                        :email="oldEmailData.email"
                                        :formRef="oldEmailForm"
                                        type="auth_email"
                                    ></code-button>
                                </div>
                            </el-form-item>
                            <el-form-item label=" ">
                                <el-button
                                    type="primary"
                                    size="default"
                                    @click="authEmail(oldEmailForm as FormInstance)"
                                >
                                    提交
                                </el-button>
                            </el-form-item>
                        </el-form>
                        <el-form
                            :model="newEmailData"
                            :rules="rules"
                            label-width="auto"
                            ref="newEmailForm"
                            v-else-if="schedule === 2"
                        >
                            <el-form-item label="新邮箱" prop="email">
                                <el-input v-model="newEmailData.email" type="text" autocomplete="off" />
                            </el-form-item>
                            <el-form-item prop="code" label="验证码">
                                <div class="code_item">
                                    <el-input v-model="newEmailData.code" type="text"></el-input>
                                    <code-button
                                        :email="newEmailData.email"
                                        :formRef="newEmailForm"
                                        type="change_email"
                                    ></code-button>
                                </div>
                            </el-form-item>
                            <el-form-item label=" ">
                                <el-button
                                    type="primary"
                                    size="default"
                                    @click="updateEmail(newEmailForm as FormInstance)"
                                >
                                    提交
                                </el-button>
                            </el-form-item>
                        </el-form>
                        <el-result icon="success" title="邮箱更改成功" v-else></el-result>
                    </div>
                </div>
            </div>
        </template>
    </el-card>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import type { EditEmailForm } from "@/api/user/type";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
// 引入工具
import { isEmpty } from "@/utils/tools/isEmpty";
import { isValidEmail } from "@/utils/tools/verify.ts";
// 引入仓库
import useUserStore from "@/store/modules/user";
// 引入接口
import { reqEmailAuth, reqUpdateEmail } from "@/api/code";
const userStore = useUserStore();
// 定义校验规则
// 校验邮箱
const validateEmail = (_rule: any, value: string, callback: any) => {
    if (isEmpty(value)) {
        return callback(new Error("邮箱不能为空"));
    }
    if (!isValidEmail(value)) {
        return callback(new Error("请输入正确的邮箱"));
    }
    callback();
};
// 定义表单校验规则
const rules = reactive<FormRules<EditEmailForm>>({
    email: [{ validator: validateEmail, trigger: "blur" }],
    code: [{ required: true, message: "验证码不能为空", trigger: "blur" }],
});
// 获取表单实例
const oldEmailForm = ref<FormInstance>();
const newEmailForm = ref<FormInstance>();

// 定义请求体
const oldEmailData = reactive<EditEmailForm>({
    email: userStore.email,
    code: "",
});
const newEmailData = reactive<EditEmailForm>({
    email: "",
    code: "",
});

// 表示当前步骤
const schedule = ref(1);

// 点击进行旧邮箱的认证
const authEmail = async ($FormEl: FormInstance) => {
    // 判断邮箱是否符合要求
    try {
        await $FormEl.validateField("code");
    } catch (error) {
        return;
    }
    const result = await reqEmailAuth(oldEmailData);
    if (result.code === 200) {
        schedule.value = 2;
        return ElMessage.success("身份验证通过");
    } else {
        return ElMessage.error(result.data);
    }
};
// 更新邮箱
const updateEmail = async ($FormEl: FormInstance) => {
    // 判断邮箱是否符合要求
    try {
        await $FormEl.validate();
    } catch (error) {
        return ElMessage.error("格式有误");
    }
    const result = await reqUpdateEmail(newEmailData);
    if (result.code === 200) {
        schedule.value = 3;
        // 重新获取用户信息
        userStore.userInfo();
        return ElMessage.success("邮箱更新成功");
    } else {
        return ElMessage.error(result.data);
    }
};
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    align-items: center;

    .step {
        width: 80%;
        margin: 0 auto;
    }
    .content {
        margin-top: 50px;
        display: flex;
        justify-content: center;

        .el-form-item {
            width: 80%;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 30px;
            .code_item {
                width: 100%;
                display: flex;
                justify-content: space-between;
                flex-wrap: nowrap;

                .el-input {
                    flex-basis: 60%;
                    flex-grow: 1;
                }

                .get_code_btn {
                    flex-basis: 20%;
                    flex-grow: 1;
                    margin-left: 20px;
                }
            }

            .el-button {
                width: 100%;
            }
        }
    }
}
</style>
